<template>
  <div class>
    <el-row>
      <el-col :span="12">
        <el-table :data="tableData" border style="width: 100%" ref="table">
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column prop="pubNum" label="名称" align="center"></el-table-column>
          <el-table-column prop="type1_name" label="分类" align="center"></el-table-column>
          <el-table-column type="expand" prop="shop">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.shop }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
            
                <span class="box" :class="scope.row.active?'active':''" >
                    <img src="~@/assets/images/1.png" alt="" width="100%">
                </span>
                
              
              <span>
                <el-button type="text" @click="toogleExpand(scope.row,scope.$index)">查看详情</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tableData: [
        {
          pubNum: "名称",
          type1_name: "分类",
          name: "好滋好味鸡蛋仔",
          shop: "王小虎夫妻店",
          active:false
        },
        {
          pubNum: "名称",
          type1_name: "分类",
          name: "好滋好味鸡蛋仔",
          shop: "王小虎夫妻店",
          active:false
        },
        {
          pubNum: "名称",
          type1_name: "分类",
          name: "好滋好味鸡蛋仔",
          shop: "王小虎夫妻店",
          active:false
        },
        {
          pubNum: "名称",
          type1_name: "分类",
          name: "好滋好味鸡蛋仔",
          shop: "王小虎夫妻店",
          active:false
        }
      ]
    };
  },
  methods: {
    toogleExpand(row,index) {
        this.tableData[index].active=!row.active;
        console.log(row);
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row);
    }
  },
  mounted() {}
};
</script>
<style  scoped>
/* .box {
    display: inline-block;
    border-width: 10px;
    border-style: solid;
    border-color:transparent transparent transparent red;
} */
.box{
    display: inline-block;
    width: 20px;
    height: 20px;
    transform: rotate(135deg);
    transition-duration:.5s
}
.active{
    transform: rotate(225deg);
    transition-duration:.5s
}
</style>